
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>css transform 3d cube panorama demo</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            @-webkit-keyframes spin {
                from { -webkit-transform: rotateY(0); }
                to   { -webkit-transform: rotateY(-360deg); }
            }
            @keyframes spin {
                from { transform: rotateY(0); }
                to   { transform: rotateY(-360deg); }
            }
            html, body {
                background-color: #fff;
                margin: 0px;
                overflow: hidden;
                width: 100%;
                height: 100%;
            }
            #container, #viewer {
                width: 100%;
                height: 100%;
            }
            #container {
            }
            #viewer {
                position: absolute;
                left: 50%;
                top: 100px;
                margin-left: -320px;
                width: 640px;
                height: 360px;
                overflow: hidden;
                -webkit-transition: -webkit-transform 3s;
                transition: transform 3s;
                -webkit-perspective: 1500px;
                -webkit-perspective-origin: 320px  180px;
                perspective: 1500px;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            #cube {
                width: 100%;
                height: 100%;
                position: relative;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                //-webkit-animation: spin 12s infinite linear;
                //animation: spin 12s infinite linear;
            }
            #cube svg,
            #cube img {
                position: absolute;
                width: 1500px;
                height: 1500px;
                top: 50%;
                left: 50%;
                margin-top: -750px;
                margin-left: -750px;
                //opacity: 0.8;
                -webkit-transition: -webkit-transform 3s;
                transition: transform 3s;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }
            .up360 {
                -webkit-transform: rotateY(0deg) rotateX(-26.565deg) translateZ(-980px) translateY(0px);
            }
            .up72 {
                -webkit-transform: rotateY(-72deg) rotateX(-26.565deg) translateZ(-980px) translateY(0px);
            }
            .up144 {
                -webkit-transform: rotateY(-144deg) rotateX(-26.565deg) translateZ(-980px) translateY(0px);
            }
            .up216 {
                -webkit-transform: rotateY(-216deg) rotateX(-26.565deg) translateZ(-980px) translateY(0px);
            }
            .up288 {
                -webkit-transform: rotateY(-288deg) rotateX(-26.565deg) translateZ(-980px) translateY(0px);
            }
            .bottom360 {
                -webkit-transform: rotateY(-36deg) rotateX(26.565deg) translateZ(-980px) translateY(-0px);
            }
            .bottom288 {
                -webkit-transform: rotateY(36deg) rotateX(26.565deg) translateZ(-980px) translateY(-0px);
            }
            .bottom216 {
                -webkit-transform: rotateY(108deg) rotateX(26.565deg) translateZ(-980px) translateY(-0px);
            }
            .bottom144 {
                -webkit-transform: rotateY(180deg) rotateX(26.565deg) translateZ(-980px) translateY(-0px);
            }
            .bottom72 {
                -webkit-transform: rotateY(252deg) rotateX(26.565deg) translateZ(-980px) translateY(-0px);
            }

            .top {
                -webkit-transform: rotateX(-90deg) translateZ(-980px) translateY(0px);
            }
            .bottom {
                -webkit-transform: rotateX(90deg) translateZ(-980px) translateY(0px);
            }
        </style>
    </head>
    <body>

        <div id="container">
            <div id="viewer">
                <div id="cube">
                    <!-- <img class="top" src="texture/top.jpg" alt="" /> -->
                    <!-- <img class="up72" src="texture/up72.jpg" alt="" /> -->
                    <!-- <img class="up144" src="texture/up144.jpg" alt="" /> -->
                    <!-- <img class="up216" src="texture/up216.jpg" alt="" /> -->
                    <!-- <img class="up288" src="texture/up288.jpg" alt="" /> -->
                    <!-- <img class="bottom72" src="texture/bottom72.jpg" alt="" /> -->
                    <!-- <img class="bottom144" src="texture/bottom144.jpg" alt="" /> -->
                    <!-- <img class="bottom216" src="texture/bottom216.jpg" alt="" /> -->
                    <!-- <img class="bottom288" src="texture/bottom288.jpg" alt="" /> -->
                    <!-- <img class="bottom360" src="texture/bottom360.jpg" alt="" /> -->
                    <!-- <img class="bottom" src="texture/.jpg" alt="" /> -->
                    <svg class="top" width="1500" height="1500">
                        <g>
                            <clipPath id="clip1">
                                <polygon points="750 0, 1463 518, 1191 1357, 309 1357, 37 518" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/top.jpg" alt="" clip-path="url(#clip1)" />
                    </svg>
                    <svg class="bottom" width="1500" height="1500">
                        <g>
                            <clipPath id="clip2">
                                <polygon points="750 0, 1463 518, 1191 1357, 309 1357, 37 518" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/bottom.jpg" alt="" clip-path="url(#clip2)" />
                    </svg>
                    <svg class="up72" width="1500" height="1500">
                        <g>
                            <clipPath id="clip3">
                                <polygon points="750 1500, 1463 982, 1191 143, 309 143, 37 982" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/up72.jpg" alt="" clip-path="url(#clip3)" />
                    </svg>
                    <svg class="up144" width="1500" height="1500">
                        <g>
                            <clipPath id="clip4">
                                <polygon points="750 1500, 1463 982, 1191 143, 309 143, 37 982" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/up144.jpg" alt="" clip-path="url(#clip4)" />
                    </svg>
                    <svg class="up216" width="1500" height="1500">
                        <g>
                            <clipPath id="clip5">
                                <polygon points="750 1500, 1463 982, 1191 143, 309 143, 37 982" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/up216.jpg" alt="" clip-path="url(#clip5)" />
                    </svg>
                    <svg class="up288" width="1500" height="1500">
                        <g>
                            <clipPath id="clip6">
                                <polygon points="750 1500, 1463 982, 1191 143, 309 143, 37 982" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/up288.jpg" alt="" clip-path="url(#clip6)" />
                    </svg>
                    <svg class="up360" width="1500" height="1500">
                        <g>
                            <clipPath id="clip7">
                                <polygon points="750 1500, 1463 982, 1191 143, 309 143, 37 982" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/up360.jpg" alt="" clip-path="url(#clip7)" />
                    </svg>
                    <svg class="bottom72" width="1500" height="1500">
                        <g>
                            <clipPath id="clip8">
                                <polygon points="750 0, 1463 518, 1191 1357, 309 1357, 37 518" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/bottom72.jpg" alt="" clip-path="url(#clip8)" />
                    </svg>
                    <svg class="bottom144" width="1500" height="1500">
                        <g>
                            <clipPath id="clip9">
                                <polygon points="750 0, 1463 518, 1191 1357, 309 1357, 37 518" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/bottom144.jpg" alt="" clip-path="url(#clip9)" />
                    </svg>
                    <svg class="bottom216" width="1500" height="1500">
                        <g>
                            <clipPath id="clip0">
                                <polygon points="750 0, 1463 518, 1191 1357, 309 1357, 37 518" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/bottom216.jpg" alt="" clip-path="url(#clip0)" />
                    </svg>
                    <svg class="bottom288" width="1500" height="1500">
                        <g>
                            <clipPath id="clip1">
                                <polygon points="750 0, 1463 518, 1191 1357, 309 1357, 37 518" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/bottom288.jpg" alt="" clip-path="url(#clip1)" />
                    </svg>
                    <svg class="bottom360" width="1500" height="1500">
                        <g>
                            <clipPath id="clip1">
                                <polygon points="750 0, 1463 518, 1191 1357, 309 1357, 37 518" />
                            </clipPath>
                        </g>
                        <image width="1500" height="1500" xlink:href="texture/bottom360.jpg" alt="" clip-path="url(#clip1)" />
                    </svg>
                </div>
            </div>
        </div>

        <script src="jquery-2.0.2.min.js"></script>
        <script>
(function() {
  var x1,
      y1,
      moving = false,
      $viewer = $('#viewer'),
      $cube = $('#cube'),
      w_v = $viewer.width(), // width of viewer
      h_v = $viewer.height(), // height of viewer
      c_x_deg = 0, // current x
      c_y_deg = 0,
      perspective = 525; // current y

  $(document).on('mousedown', function(e) {
    x1 = e.pageX;
    y1 = e.pageY;

    moving = true;
    e.preventDefault();
  });

  $(document).on('mousemove', function(e) {
    if( moving === true ) {
      x2 = e.pageX;
      y2 = e.pageY;

      var dist_x = x2 - x1,
          dist_y = y2 - y1,
          perc_x = dist_x / w_v,
          perc_y = dist_y / h_v,
          deg_x = Math.atan2(dist_y, perspective) / Math.PI * 180,
          deg_y = -Math.atan2(dist_x, perspective) / Math.PI * 180,
          i,
          vendors = ['-webkit-', '-moz-', ''];

      c_x_deg += deg_x;
      c_y_deg += deg_y;
      c_x_deg = Math.min(90, c_x_deg);
      c_x_deg = Math.max(-90, c_x_deg);

      c_y_deg %= 360;

      deg_x = c_x_deg;
      deg_y = c_y_deg;

      for(i in vendors) {
        $cube.css(vendors[i] + 'transform', 'rotateX(' + deg_x + 'deg) rotateY(' + deg_y + 'deg)');
      }

      x1 = x2;
      y1 = y2;
    }
    e.preventDefault();
  }).on('mouseup', function(e) {
    moving = false;
    e.preventDefault();
  });

})();
        </script>
    </body>
</html>

